<!--
 * @Description: 底部分享弹窗，详情见ui丝巾详情页
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 10:47:45
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-12-04 21:53:47
 * @FilePath: /xp-platform-mobile/sheep/components/f-link-shareModal/f-link-shareModal.vue
 * @demoPic: 
-->
<template>
	<f-shareGuide
		:show="state.showShareGuide"
		:showClose="false"
		@close="onCloseGuide"
	></f-shareGuide>
	<view class="guider" v-if="state.showShareGuide">
		<image class="guide-image" :src="guider"></image>
		<view class="guide-tip">
			<view class="h">立即分享给好友吧</view>
			<view class="b"> 点击屏幕右上角即可分享本页面 </view>
		</view>
	</view>
	<uni-popup
		class="link-share"
		ref="popup"
		type="bottom"
		background-color="#fff"
		border-radius="48rpx 48rpx 0 0"
	>
		<view class="top">
			<view class="link" @tap="onShareByCopyLink">
				<image :src="linkImg" mode="" style="width: 88rpx; height: 88rpx"> </image>
				<view class="text">复制链接</view>
			</view>
			<view class="wx" @tap="onShareByWx">
				<image :src="wxImg" mode="" style="width: 88rpx; height: 88rpx"></image>
				<view class="text">转发好友</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="footer">
			<b-button @tap="close()">取消</b-button>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, reactive, defineExpose } from 'vue';
	import sheep from '@/sheep/index.js';
	import { isWxBrowser } from '@/sheep/helper/utils';

	const linkImg = ref('./../../../static/common/shareLink.png');
	const wxImg = ref('./../../../static/common/wx.png');
	const state = reactive({
		showShareGuide: false, //H5的指引。
	});
	const popup = ref();
	const guider = ref('./../../static/common/guider.png');

	// 开启弹窗
	const open = () => {
		popup.value.open();
	};
	// 关闭弹窗
	const close = () => {
		popup.value.close();
	};
	// 复制链接
	const onShareByCopyLink = () => {
		close();
		const { baseUrl, params, pagePath } = sheep.$helper.getCurrentPagePath();
		const pageUrl = baseUrl + '/#' + pagePath + `?id=${params.id}`;
		sheep.$helper.copyText(pageUrl);
	};
	// 分享到微信好友
	const onShareByWx = () => {
		close();
		if (isWxBrowser()) {
			// 微信浏览器中，打开分享导航
			state.showShareGuide = true;
		} else {
			sheep.$helper.toast('请微信环境下打开后分享好友～');
		}
	};
	//关闭分享导航
	const onCloseGuide = () => {
		state.showShareGuide = false;
	};
	// 向外暴露的属性&方法
	defineExpose({
		open,
		close,
	});
</script>

<style lang="scss" scoped>
	.link-share {
		height: 352px;

		.top {
			height: 196rpx;
			display: flex;
			justify-content: space-around;

			.link,
			.wx {
				width: 104rpx;
				margin-top: 36rpx;

				.text {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}

		.line {
			border-bottom: 1rpx solid #e7e7e8;
		}

		.footer {
			height: 154rpx;
			display: contents;
		}
	}

	.guider {
		width: 750rpx;
		height: 358rpx;
		position: fixed;
		right: 30rpx;
		top: 0;
		z-index: 10080;

		.guide-tip {
			width: 512rpx;
			height: 152rpx;
			background: rgba(0, 0, 0, 0.4);
			color: #fff;
			border-radius: 76px;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 0 auto;
			margin-top: 184rpx;

			.h {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.b {
				font-size: 26rpx;
			}
		}

		.guide-image {
			width: 140rpx;
			height: 184rpx;
			position: absolute;
			z-index: 10081;
			right: 0;
		}
	}
</style>
